<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="sidebar">

    <div class="sidebar" id="detail_sidebar" v-cloak>
        <h3 class="robot-name mb-4" th:attr="data-agent-name=${agent.agentName}" th:text="${agent.agentName}">
            智能助手</h3>
        <ul class="nav nav-pills flex-column">
            <li class="nav-item" v-for="(item,index) in sidebar_navList" @click="sidebar_selectNav(item,index)">
                <a class="nav-link block" :class="{'active':block_hash==item.hash}" :href="item.hash">
                    <i class="fas me-2" :class="item.icon"></i>{{item.label}}
                </a>
            </li>
        </ul>
    </div>

    <script >
        //
        var vue_detail_sidebar = new Vue({
            el: '#detail_sidebar',
            data: {
                block_hash: window.location.hash || '#basicInfo',
                sidebar_navList: [
                    {label: '基础信息', hash: '#basicInfo', icon: 'fa-sliders-h',},
                    {label: '服务发布', hash: '#serverPublish', icon: 'fa-share-alt',},
                ],
            },
            created: function () {
                //
            },
            methods: {
                sidebar_selectNav: function (item, index) {
                    this.block_hash = item.hash
                    // console.log('item->', item)
                },
            }
        })
    </script>

</th:block>

</body>
</html>